<template>
  <div id='tmpl'>
      <div id="mui-content" class="mui-content" style="background-color:#fff">
		    <ul class="mui-table-view mui-grid-view">
		        <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="(item,index) in list" :key="index">
		            <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
		                <img class="mui-media-object" :src="item.img_url">
		                <div class="mui-media-body">{{item.title}}</div>
                        <div class="desc">
                            <p>
                                <span>￥{{item.sell_price}}</span>
                                <del>￥{{item.market_price}}</del>
                            </p>
                            <p>
                                <h6 class="left">热卖中</h6>
                                <h6 class="right">{{item.stock_quantity}}</h6>
                            </p>
                        </div>
                    </router-link>
                </li>
		    </ul>    
		</div>
  </div>
</template>
<script>
import common from "../../kits/common.js";
import { Toast } from 'mint-ui';
export default {
  data () {
    return {
        list:[]
    };
  },
  created(){
      this.getlist();
  },
  methods:{
      getlist(){
          var url=common.apidomain+"/api/getgoods?pageindex=1";
          this.$http.get(url).then(function(response){
              var body=response.body;
              if(body.status != 0){
                  Toast(body.message);
                  return;
              };
              this.list=body.message;
          })
      }
  }
}
</script>
<style lang="css" scoped>
#mui-content li{
    border: 1px solid rgba(0,0,0,0.4);
    margin-left: 4px;
    box-shadow: 0 0 4px #000;
    padding: 5px;
}
#mui-content .mui-media-body{
    color:#0094ff;
}
#mui-content .desc{
    height: 60px;
    background-color: rgba(0,0,0,0.1);
    margin-top: 5px;
    padding:5px;
    text-align: left;
}
#mui-content .desc span{
    color:red;
}
#mui-content a{
    padding-left:0;
    margin-left: 0;
}
#mui-content .right{
    position: absolute;
    right:10px;
    bottom:0px;
}
#mui-content .left{
    position: absolute;
    left:10px;
    bottom:0px;
}
</style>